<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        依赖注入规则：
            + 使一个祖先组件作为其后代组件的依赖注入方，提供依赖共享值【无响应式提供】;
                => 通过 配置 provide 工厂函数返回依赖变量对象【不能直接使用;所有后代组件将自动具有该依赖值】
            + 处于同一条组件链上的其他后代组件，无论这个组件的层级有多深都可以注入该变量值【无响应式提供】;
                => 在需要使用的组件中通过 配置 inject 注入，完成依赖变量的拦截加载，inject 类似于数据仓库可以直接使用【无响应式提供】;
        构建响应式依赖注入：
            + 通过 provide 和 独立计算属性定义方法 computed(()=>{ return ?? }) 完成对祖先组件data数据仓库的依赖定义；
            + 注入组件依然使用 inject 完成依赖变量的拦截注入和使用；
            + 响应式只提供由 祖先组件的数据仓库变量变化到 注入组件的响应式更新，反之不能执行
        </pre>
        <h5>父组件</h5>
        <input v-model="info" type="text" />
        <my-comp></my-comp>
    </div>
    <script type="text/x-template" id="my-comp">
        <div class="cbox">
            <h5>子组件</h5>
            <p>加载依赖变量【无响应式】:{{ msg }}</p>
            <p>加载依赖变量【有响应式】:{{ tempInfo.value }}</p>
            <my-comp-child></my-comp-child>
        </div>
    </script>
    <script type="text/x-template" id="my-comp-child">
        <div class="cbox">
            <h5>子组件的子组件</h5>
            <p>加载依赖变量【无响应式】:{{ msg }}</p>
            <input v-model="msg" type="text" />
            <p>加载依赖变量【有响应式】:{{ tempInfo.value }}</p>
            <input v-model="tempInfo.value" type="text" />

        </div>
    </script>
    <script type="module">
        import { createApp,computed } from "../../assets/vue3/vue.esm-browser.js";
        
        const MyCompChild = {
            template:"#my-comp-child",
            inject:["msg","tempInfo"],
        }

        const MyComp = {
            components: {
                MyCompChild,
            },
            inject:["msg","tempInfo"],
            template:"#my-comp"
        }

        createApp({
            components: {
                MyComp,
            },
            data(){
                return {
                   info:"仓库info变量"
                }
            },
            provide(){
                return {
                    msg:"注入的MSG测试数据",
                    tempInfo:computed( ()=>this.info )
                }
            }
        }).mount("#app");
    </script>
</body>
</html>